<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 标题区域 -->
      <div class="login_title">
        <img src="../assets/title.png" />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
        label-width="0"
        class="login_form"
      >
        <!-- 账号 -->
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            prefix-icon="el-icon-user"
            placeholder="邮箱/登录手机"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="el-icon-lock"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="login_btn">
          <el-button type="primary" style="width: 340px" @click="login"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 注册按钮 -->
      <span class="register"
        ><router-link to="/register">>立即注册</router-link></span
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 验证邮箱/手机的规则
    var checkAccount = (rule, value, cb) => {
      const regAccount =
        /(^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$)|(^1[3|4|5|8]\d{9}$)/;

      if (regAccount.test(value)) {
        // 合法的邮箱或手机
        return cb();
      }

      cb(new Error("请输入合法的账号(邮箱/手机)"));
    };

    return {
      // 登录表单的数据绑定对象
      loginForm: {
        account: "",
        password: "",
      },
      // 表单的验证规则对象
      loginFormRules: {
        // 验证账号是否合法
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: checkAccount, trigger: "blur" },
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      // 发起请求前的表单预验证
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("login", this.loginForm);
        if (res.meta.status !== 200) return this.$message.error("登录失败!");
        this.$message.success("登录成功!");
      });
    },
  },
};
</script>

<style lang='less' scoped>
.login_title {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
}

.login_container {
  background: url("../assets/pig.jpg") no-repeat no-repeat center;
  background-size: cover;
  height: 100%;

  .login_box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background-color: rgba(0, 0, 0, 0.3);
    height: 350px;
    border-radius: 5px;
  }
}

.login_form {
  position: absolute;
  bottom: 50px;
  width: 100%;
  padding: 0 80px;
  box-sizing: border-box;
}

.login_btn {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.register {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 14px;

  a {
    color: #e7e4e3;
    text-decoration: none;
  }
}
</style>